<template>
  <div class="note-card dir-card">
    <h3 class="mat-title" @click="openDir">
        {{mat.title}}
    </h3>
    <div class="mat-intro" v-html="mat.intro"></div>
  </div>
</template>

<script>
export default {
  props: ["mat"],
  computed: {
  },
  created() {
    
  },
  data() {
    return {
    };
  },
  methods: {
    openDir() {
      this.$router.push("/mats/view/" + this.mat.id)
    }
  }
};
</script>

<style lang="stylus">
.mat-card
  width 100%
  display flex

  .pic-box
    position relative
    width 256px
    height 160px
    border-radius 4px

    .pic
      overflow hidden
      border-radius 4px
      width 256px
      height 160px

      img
        max-width 256px
        max-height 160px

  .info-box
    width 400px
    height 200px
    margin-left 10px

    .title
      font-size 1.2em
      color #333
      height 102px
      display -webkit-box
      margin-bottom 10px

    .up,.count
      color #999
      font-size 0.8em
      display inline-box
      height 16px
      
    .up
      margin-bottom 6px
      overflow hidden
      text-overflow ellipsis 



</style>